<template>
  <div>
    <el-card class="box-card" v-loading="loading">
      <div slot="header" class="clearfix">
        <el-col :span="18">
          <span>提现流水信息</span>
        </el-col>
        <el-col :span="6" style="text-align: right">
          <el-button size="mini" type="primary" @click="runningWaterShowFlag=true">流水详情</el-button>
        </el-col>
      </div>
      <el-table :data="[tableData]" class="el-table-align-center">
        <el-table-column label="用户余额">
          <template slot-scope="{row}">
            {{row.balance | currency}}
          </template>
        </el-table-column>
        <el-table-column label="所需流水">
          <template slot-scope="{row}">
            {{row.requireAmount | currency('', 2, {type: 2})}}
          </template>
        </el-table-column>
        <el-table-column label=" 已完成投注流水">
          <template slot-scope="{row}">
            {{row.validBalance | currency('', 2, {type: 2})}}
          </template>
        </el-table-column>
        <el-table-column label="剩余流水">
          <template slot-scope="{row}">
            {{row.leftAmount | currency('', 2, {type: 2})}}
          </template>
        </el-table-column>
        <!--<el-table-column label="流水倍数">-->
          <!--<template slot-scope="{row}">-->
            <!--{{row.limit}}-->
          <!--</template>-->
        <!--</el-table-column>-->
        <!--<el-table-column label="充值锁定金额">-->
          <!--<template slot-scope="{row}">-->
            <!--{{row.freezeBalance | currency}}-->
          <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column label="流水开始统计时间">
          <template slot-scope="{row}">
            {{row.lastRecharge | toTime}}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog :title="'提现流水详情：'+$store.state.member.member_info.username" :visible.sync="runningWaterShowFlag" width="85%" append-to-body class="running-water-detail-dialog">
      <running-water-info v-if="runningWaterShowFlag" :runningWaterRow= "{}"/>
    </el-dialog>
  </div>

</template>

<script>
import { getMemberWithDraw } from '@/services/api/member';
import runningWaterInfo from '@/views/member/detail/runningWaterInfo';
import { grid } from '@/build';

export default {
  name: 'user-withdraw',
  mixins: [grid],
  components: { runningWaterInfo },
  data() {
    return {
      loading: false,
      tableData: {},
      runningWaterShowFlag: false,
    };
  },
  mounted() {
    this.bindGet(getMemberWithDraw, 'tableData', {
      action: 'getGrid',
      sendingData: { userId: this.$store.state.member.member_id },
    });

    this.getAll();
  },
  methods: {
  },
};
</script>

<style lang="scss">
  .el-table-no-head {
    .el-table__header-wrapper {
      display: none;
    }
  }
  .running-water-detail-dialog{
   padding-left: 10%;
  }
</style>
